<template>
    <div class="customBox modelBox">
        <h3 class="title">
            全局方法
            <el-button style="float: right;" type="success" size="mini" round @click="newFun" circle>
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>
        <el-input class="modelSeatchInput" v-model="keyStr" clearable placeholder="key值筛选"></el-input>
        <el-row class="modalItem" v-for="(item, index) in funArray" :key="index">
            <el-col :span="24" class="modelName">{{item.str}} <span style="color: #999;">{{item.name}}</span>
            </el-col>
            <el-col :span="24">
                <el-button class="miniButton" size="mini" type="danger" icon="el-icon-delete" round
                    @click="deleteFun(index)">删除
                </el-button>
                <el-button class="miniButton" size="mini" type="warning" icon="el-icon-edit-outline"
                    @click="editFun(item)" round>编辑
                </el-button>
            </el-col>
        </el-row>

        <el-dialog title="编辑自定义方法" append-to-body :class="theme" :visible.sync="showJsEditor" width="600px">
            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="6" style="line-height: 40px;">快速插入字段:</el-col>
                <el-col :span="12">
                    <el-input v-model="activeObj.str" placeholder="不能为空"></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="6" style="line-height: 40px;">备注名称 :</el-col>
                <el-col :span="12">
                    <el-input v-model="activeObj.name" placeholder="备注名称"></el-input>
                </el-col>
            </el-row>

            <el-input type="textarea" class="CodeMirror-custom" :rows="10" resize="none" v-model="activeObj.functionString"></el-input>

            <br>
            <br>

            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="20">
                    <el-input v-model="activeObj.TextStr" placeholder="测试代码"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button style="float: right;" type="success" size="samll" @click="runFunction">测试</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="24">运行结果 ：{{ans}}</el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="save">保存</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import { mapState } from 'vuex';
    import uuid from 'node-uuid';
    const crypto = require("crypto");
    window.uuid = uuid;
    window.NodeCrypto = crypto;

    export default {
        data() {
            return {
                ans: '',
                activeObj: {},
                showJsEditor: false,
                keyStr: '',
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
            ...mapState("fun", {
                funArray: state => state.funArray,
            }),
        },
        methods: {
            runFunction() {
                var _this = this;
                try {
                    var ans = '';
                    eval(_this.activeObj.functionString + ';ans = ' + _this.activeObj.TextStr);
                    _this.ans = ans;
                } catch (error) {
                    _this.ans = error;
                };
            },
            newFun() {
                this.ans = '';
                this.activeObj = {};
                this.showJsEditor = true;
            },
            deleteFun(index) {
                this.$confirm('删除该函数将导致之前使用该函数的API测试出现BUG', '是否删除该函数？', {
                    customClass: this.theme
                }).then(_ => {
                    this.$store.dispatch('fun/deleteFun', index);
                    console.log('delete');
                }).catch(_ => { });
            },
            editFun(item) {
                this.ans = '';
                this.activeObj = JSON.parse(JSON.stringify(item));
                this.showJsEditor = true;
            },
            save() {

            },
        },
    }

</script>
<style>

</style>